<template>
    <div class="middle-bg">
        <div class="mask-bg">
            <div class="re-mask sj1">
                <div class="sj-num-row">{{sjObj.db}}</div>
                <div class="sj-label-row">待办事件</div>
            </div>
            <div class="re-mask sj2">
                <div class="sj-num-row">{{sjObj.js}}</div>
                <div class="sj-label-row">接收事件</div>
            </div>
            <div class="re-mask sj3">
                <div class="sj-num-row">{{sjObj.fj}}</div>
                <div class="sj-label-row">分拣事件</div>
            </div>
            <div class="re-mask sj4">
                <div class="sj-num-row">{{sjObj.zb}}</div>
                <div class="sj-label-row">在办事件</div>
            </div>
            <div class="re-mask sj5">
                <div class="sj-num-row">{{sjObj.bj}}</div>
                <div class="sj-label-row">办结事件</div>
            </div>
            <div class="re-mask sj6">
                <div class="sj-num-row1 zx-row">{{dbObj.zx}}</div>
                <div class="sj-label-row">咨询求助</div>
            </div>
            <div class="re-mask sj7">
                <div class="sj-num-row1">{{dbObj.yj}}</div>
                <div class="sj-label-row">意见建议</div>
            </div>
            <div class="re-mask sj8">
                <div class="sj-num-row1">{{dbObj.ts}}</div>
                <div class="sj-label-row">投诉举报</div>
            </div>
            <div class="re-mask sj9">
                <div class="sj-num-row1">{{dbObj.bz}}</div>
                <div class="sj-label-row">表彰表扬</div>
            </div>
            <div class="sj-mask mask1">
                <div class="sj-num">{{reportCount[0]}}</div>
                <div class="sj-label">下派事件</div>
            </div>
            <div class="sj-mask mask2">
                <div class="sj-num">{{reportCount[1]}}</div>
                <div class="sj-label">上报事件</div>
            </div>
        </div>
        <div class="bottom">
            <ul class="bottom-wrapper">
                <li v-for="(item,index) in dpList" @click="handleDpType(item,index)" :key="index" :class="{active:index==currentIndex}" class="dp-handle-row">
                    <div class="icon-row">
                        <img class="icon" v-if="!!item.name" :src="item.icon" alt="">
                        <span v-else>+</span>
                    </div>
                    <div class="circle-row">
                    </div>
                    <div>{{item.name}}</div>
                </li>
            </ul>
            <img class="bottom-bg" src="../../assets/dp1/bottom-bg.png" alt="">
        </div>
    </div>
</template>

<script>
const zhzxIcon = require("../../assets/dp1/zhzx.png");
const djztIcon = require("../../assets/dp1/djzt.png");
const zwztIcon = require("../../assets/dp1/zwzt.png");
const zzztIcon = require("../../assets/dp1/zzzt.png");
const cgztIcon = require("../../assets/dp1/cgzt.png");
import Pubsub from "../../utils/pubsub";
import {
    queryDistributeAndReportCount,
    getCountByEventStatus,
    getCountHotLineType,
} from "../../config/api";
export default {
    data() {
        return {
            currentIndex: 3, //大屏专栏操作列表下标
            commonRequest: {
                type: ""
            },
            dpList: [
                { name: "综合展现", icon: zhzxIcon, type: 1, path: "/dp1" },
                { name: "党建专题", icon: djztIcon, type: 2, path: "/dp2" },
                { name: "政务专题", icon: zwztIcon, type: 3, path: "/dp3" },
                { name: "综治专题", icon: zzztIcon, type: 4 },
                { name: "城管专题", icon: cgztIcon, type: 5, path: "/dp5" },
                { name: "", icon: "+", type: 6 }
            ],
            dbObj:{
                zx:0,
                yj:0,
                ts:0,
                bz:0,
            },
            sjObj:{
                db:0,
                js:0,
                fj:0,
                zb:0,
                bj:0,
            },
            reportCount:[0,0],//下派/上报事件
        };
    },
     mounted(){
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initData();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods: {
        initData(){
            this.queryDistributeAndReportCount();//下派和上报事件数量查询
            this.getCountHotLineType();//中间四大类数量统计
            this.getCountByEventStatus();//事件状态
        },
        /**
         * 下派和上报事件数量查询
         */
        queryDistributeAndReportCount(){
            queryDistributeAndReportCount(this.commonRequest).then((result)=>{
                let data = result.data || [];
                this.reportCount = data;
            })
        },
        /**
         * 中间四大类数量统计
         */
        getCountHotLineType(){
            getCountHotLineType(this.commonRequest).then((result)=>{
                let data = result.data || [];
                data.map((item)=>{
                    let {name,total} = item;
                    if(name == "投诉举报"){
                        this.dbObj.ts = total;
                    }else if(name == "意见建议"){
                        this.dbObj.yj = total;
                    }else if(name == "咨询求助"){
                        this.dbObj.zx = total;
                    }else if(name == "表彰表扬"){
                        this.dbObj.bz = total;
                    }
                })
            })
        },
        /**
         * 事件状态
         */
        getCountByEventStatus(){
            getCountByEventStatus(this.commonRequest).then((result)=>{
                let data = result.data || [];
                if(data.length){
                    this.sjObj.db = data[0].statusCount;
                    this.sjObj.js = data[1].statusCount;
                    this.sjObj.fj = data[2].statusCount;
                    this.sjObj.zb = data[3].statusCount;
                    this.sjObj.bj = data[4].statusCount;
                }
            })
        },
        handleDpType(item, index) {
            this.currentIndex = index;
            if (item.path) {
                this.$router.push(item.path);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.middle-bg {
    width: 1392px;
    margin-top: 84px;
    position: relative;
    background: url("../../assets/dp4/middle-bg.png") no-repeat;
    .bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1392px;
        position: absolute;
        bottom: 0;
        .bottom-bg {
            margin-left: 30px;
        }
    }
    .bottom-wrapper {
        width: 585px;
        height: 55px;
        // margin-left: 30px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        bottom: 67px;
    }
    .dp-handle-row {
        text-align: center;
        color: #abd1ff;
        &.active {
            .circle-row {
                opacity: 1;
            }
            color: #f0f7ff;
        }
        .circle-row {
            width: 85px;
            height: 85px;
            border-radius: 50%;
            margin-bottom: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(
                    0deg,
                    #157f7e 0%,
                    #77bfbf 51%,
                    #d9ffff 100%
                ),
                linear-gradient(#bfbfbf, #bfbfbf);
            background-blend-mode: normal, normal;
            box-shadow: 1.5px 2.6px 19px 1px rgba(0, 0, 0, 0.96);
            opacity: 0.4;
        }
    }
    .icon-row {
        height: 85px;
        width: 85px;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
    }
    .icon {
        z-index: 999;
    }
    .mask-bg {
        height: 566px;
        width: 1392px;
        position: relative;
        .re-mask {
            height: 66px;
            width: 223px;
            position: absolute;
            &.sj1 {
                top: 101px;
                left: 79px;
            }
            &.sj2 {
                top: 180px;
                left: 120px;
            }
            &.sj3{
                top: 268px;
                left: 84px;
            }
            &.sj4{
                top: 354px;
                left: 60px;
            }
            &.sj5{
                top: 323px;
                left: 322px;
            }
            &.sj6{
                right: 170px;
                top: 21px;
            }
            &.sj7{
                top: 92px;
                right: 94px;
            }
            &.sj8{
                top: 182px;
                right: 147px;
            }
            &.sj9{
                top: 276px;
                right: 96px;
            }
            .sj-num-row{
                width:100px;
                text-align: center;
                color:#f0b40d;
                font-size: 24px;
                height:24px;
            }
            .sj-num-row1{
                text-align: right;
                color:#f0b40d;
                font-size: 24px;
                height:24px;
                margin-right: 40px;
            }
            .zx-row{
                margin-right: 30px;
            }
            .sj-label-row{
                color:#73ffff;
                box-sizing: border-box;
                padding-left: 68px;
            }
        }
        .sj-mask{
            height:80px;
            width:208px;
            box-sizing: border-box;
            padding-right: 15px;
            text-align:right;
            position: absolute;
            color:#f9b90b;

            &.mask1{
                left: 431px;
                bottom: 90px;
            }
            .sj-num{
                font-size: 26px;
                margin: 6px 0;
            }
            .sj-label{
                font-size: 16px;
            }
            &.mask2{
                left: 764px;
                bottom: 89px;
            }
        }
        
    }
    
}
</style>